<template>
  <div class="chart-container"  ref="chartContainerRef">
    <!-- <div>
    <table style="width: 100%">
      <colgroup>
        <col width="50%" />
        <col width="25%" />
        <col width="25%" />
      </colgroup>
      <thead>
        <th>姓名</th>
        <th>年龄</th>
        <th>电话</th>
      </thead>
    </table>

    </div> -->
    <table style="width: 100%">
      <!-- 设置列宽 -->
      <colgroup>
        <col width="50%" />
        <col width="25%" />
        <col width="25%" />
      </colgroup>
      <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>电话</td>
      </tr>
    </table>

    <div class="vertical-scoll">
      <vue3-seamless-scroll :list="list">
        <template v-slot="{ data }">
          <!-- <span style="width: 60%; display: block; line-height: 30px">
            {{ data.name }} {{ data.age }}
          </span> -->
          <table style="width: 100%">
            <!-- 设置列宽 -->
            <colgroup>
              <col width="50%" />
              <col width="25%" />
              <col width="25%" />
            </colgroup>
            <tr>
              <td>{{ data.name }}</td>
              <td>{{ data.age }}</td>
              <td>{{ data.tel }}</td>
            </tr>
          </table>
        </template>
      </vue3-seamless-scroll>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { Vue3SeamlessScroll, VerticalScroll, HorizontalScroll } from 'vue3-seamless-scroll'

const listData = Array.from({ length: 10000 }, (_, i) => ({
  id: Date.now() + i + 1,
  name: `无缝滚动展示数据第${i + 1}条`,
  age: i + 1,
  tel: i + 3
}))

// 直接在script setup中定义list变量，无需额外的组件定义
const list = ref(listData)



// 创建对chart-container元素的引用
const chartContainerRef = ref(null)
// 存储容器高度的响应式变量
const containerHeight = ref(0)

// ResizeObserver实例
let resizeObserver = null

onMounted(() => {
  // 组件挂载后，获取初始高度
  if (chartContainerRef.value) {
    updateContainerHeight()
    
    // 创建ResizeObserver实例来监听元素大小变化
    resizeObserver = new ResizeObserver(() => {
      updateContainerHeight()
    })
    
    // 开始观察元素
    resizeObserver.observe(chartContainerRef.value)
  }
})

// 更新容器高度的函数
function updateContainerHeight() {
  if (chartContainerRef.value) {
    // 获取元素的实际高度
    const height = chartContainerRef.value.offsetHeight
    containerHeight.value = height
    console.log('Chart容器当前高度:', height)
    // 这里可以根据需要添加其他逻辑，例如基于新高度更新其他元素
  }
}

onBeforeUnmount(() => {
  // 组件卸载前，停止观察
  if (resizeObserver && chartContainerRef.value) {
    resizeObserver.unobserve(chartContainerRef.value)
    resizeObserver.disconnect()
  }
})



</script>

<style lang="less" scoped>
.chart-container {
  padding: 5%;
  width: 100%;
  height: 100%;
  color: rgb(0, 199, 255); /* 设置容器内所有文本的基础颜色 */
}
.vertical-scoll {
  overflow: hidden;
  // 高度为父容器的高度减去padding
  height: calc(100% - 20%);
  border: 1px solid green;
}

// .horizonta-scoll {
//   overflow: hidden;
//   height: 100px;
// }

// .vertical-text {
//   height: 100px;
//   writing-mode: vertical-lr;
//   text-orientation: upright;
//   line-height: 20px;
//   display: inline-block;
// }
</style>
